<script>

import {getDist} from "@/util/util";


export default {
  data() {
    return {
      dialogVisible: false,
      dictTree: [],
      schoolList:[],
      liveList:[],
      tableData:[],
      stageList:[],
      formObj:{
        schoolGrade:'',
        schoolCode:'',
        classBoardingArrangement:'',
        educationStage:'',
        personCharge:'',
        personChargePhone:'',
        start:1,
        end:1
      }
    }
  },

  props: {
    tableColumns: Array,
    tableConfig: Object
  },
  mounted() {

    getDist().then(res => {
      this.dictTree = res;
    });
  },
  methods: {
    openDia(sendMsg, active) {
      this.active = active;
      this.dialogVisible = true;
      this.getSchoolList();
      this.getLive();
    },
    getLive(){
      this.$HttpService.get(`/common/getItem/live`).then(res=>{
        this.liveList = res
      })
      this.$HttpService.get(`/common/getItem/education_level`).then(res=>{
        this.stageList = res
      })
    },
    getSchoolList(){
      this.$HttpService.get(`/t-school/findPageAuth?current=1&size=100`).then(res=>{
        this.schoolList = res.records;
      })
    },
    activeSchool(schoolCode){
      console.log(schoolCode);
      let arr = this.schoolList.filter(x=>{
        return x.schoolCode === schoolCode;
      })
      this.formObj['classBoardingArrangement'] = arr[0].classBoardingArrangement;
      this.formObj['educationStage'] = arr[0].educationStateName;
      this.$forceUpdate()
    },
    creatTable(){
      for (let i = this.formObj.start-1;i<this.formObj.end;i++) {
        this.tableData.push({
          schoolCode: this.formObj.schoolCode,
          schoolGrade: this.formObj.schoolGrade,
          classBoardingArrangement: this.formObj.classBoardingArrangement,
          educationStage: this.formObj.educationStage,
          className: `${i+1}班`,
          personCharge:'',
          personChargePhone:'',
        });
      }
    },
    deleteClass(row){
      console.log(row);
      let index = this.tableData.findIndex(x=>{
        return x.className === row.className;
      })
      this.$confirm(`确认要删除这条数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.tableData.splice(index, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        })
      })

    },
    translateSchoolName(code){
      let arr = this.schoolList.filter(x=>{
        return x.schoolCode === code;
      })
      return arr[0].schoolName;
    },
    reSet(){
      this.tableData = [];
      for (let i in this.formObj){
        this.$set(this.formObj,i,'')
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitData(){
      if (!this.tableData.length) return this.$message.warning('请先生成配置班级，再进行添加！');
      this.$HttpService.post('/t-class/addBatch', this.tableData).then(res=>{
        this.reSet()
        this.$message.success('添加成功');
        this.dialogVisible = false;
        this.$emit('success');
      })
    }
  }
}
</script>

<template>
  <el-dialog title="新增班级" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
    <div class="center">
      <div class="mess">
        <div class="item">
          <el-select size="small" @change="activeSchool" v-model="formObj['schoolCode']" placeholder="请选择">
            <el-option v-for="item in schoolList" :key="Math.random()" :label="item.schoolName" :value="item.schoolCode"></el-option>
          </el-select>
        </div>
        <div class="item">
          <el-date-picker size="small" format="yyyy" value-format="yyyy" :picker-options="{disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 }}" v-model="formObj.schoolGrade" type="year" placeholder="入学年份"></el-date-picker>
        </div>
        <div class="item">
          <el-select size="small" v-model="formObj['classBoardingArrangement']" placeholder="请选择住宿安排">
            <el-option v-for="item in liveList" :key="Math.random()" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="item">
          <el-select size="small" v-model="formObj['educationStage']" placeholder="请选择教育阶段">
            <el-option v-for="item in stageList" :key="Math.random()" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="item item-num">
          <el-input-number size="small" v-model="formObj.start" :min="1"></el-input-number>
          -
          <el-input-number size="small" v-model="formObj.end" :min="1"></el-input-number>
        </div>
        <el-button size="small" type="primary" plain @click="creatTable">确认</el-button>
        <el-button size="small" plain @click="reSet">重置</el-button>
      </div>
<!--      <div class="mess">-->
<!--        <div class="item">-->
<!--          <el-input size="small" v-model="formObj.start" placeholder="请输入责任老师名称"></el-input>-->
<!--        </div>-->
<!--        <div class="item">-->
<!--          <el-input size="small" v-model="formObj.start" placeholder="请输入责任老师联系方式"></el-input>-->
<!--        </div>-->
<!--      </div>-->
      <div class="table">
        <el-table :data="tableData" stripe style="width: 100%" type="flex" justify="center" align="middle">
          <el-table-column align="center" prop="schoolCode" label="学校名称">
            <template slot-scope="scope">
              {{translateSchoolName(scope.row.schoolCode)}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="schoolGrade" label="入学年份"></el-table-column>
          <el-table-column align="center" prop="classBoardingArrangement" label="居住安排">
            <template slot-scope="scope">
              {{scope.row.classBoardingArrangement == '1'?'住校':'走读'}}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="className" label="班级名称"></el-table-column>
<!--          <el-table-column align="center" prop="personCharge" label="责任老师">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button size="mini" type="text" icon="el-icon-edit" @click="deleteClass(scope.row)">选择责任老师</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column align="center" prop="numberPeople" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="deleteClass(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submitData">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.center {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15%;
  min-height: 400px;

  .mess {
    display: flex;

    .item {
      width: 200px;
      margin-right: 20px;
    }
    .item-num{
      width: 600px;
    }
  }
  .table{
    height: 300px;
    padding-top: 20px;
    overflow-y: auto;
  }
  .btn{
    padding: 20px;
    text-align: right;
  }
}

</style>
